<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>模板语法</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      {{ message }}
      <span v-once>这个将不会改变 {{ message }}</span>
      <p>Using mustaches: {{ rawHtml }}</p>
      <!-- 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 -->
      <p>Using v-html directive: <span v-html="rawHtml"></span></p>
      <div v-bind:id="dynamicId">
          <button v-bind:disabled="isButtonDisabled">提交</button>
      </div>
      <!-- 使用JS表达式 -->
      <!-- 只能包含单个表达式 -->
      {{ message + 1 }}
      {{ isButtonDisabled ? 'YES' : 'NO' }}
      {{ message.split('').reverse().join('') }}
    
      <!-- 指令 -->
      <p v-if="seen">你看到我了</p>
      <!-- 一些指令能够接收一个“参数”，在指令名称之后以冒号表示 -->
      <a v-bind:href="url">链接</a>
      <a v-on:click="doSomething">点击事件</a>

      <!-- 修饰符 -->
      <form v-on:submit.prevent="onSubmit">
          <input type="text">
          <input type="submit" value="submit">
      </form>
      <!-- 缩写 -->
      <a v-bind:href="url">url</a>
      <a :href="url">url</a>

      <a v-on:click="doSomething">doSomething</a>
      <a @click="doSomething">doSomething</a>
    </div>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message: 'test',
                rawHtml: '<span style="color:red">This should be red.</span>',
                dynamicId : 'test',
                isButtonDisabled:true,
                url:'http://54.com',
                seen:true,
            },
            methods : {
                doSomething : function(){
                    alert(1)
                },
                onSubmit: function(){
                    alert(2)
                }
            }
        })
    </script>
</body>
</html>